<template>
	<view class="order_details">
		<!--  -->
		<view class="details_top">
			<image v-if="status==2" src="@/static/images/order_icon1.png" mode=""></image>
			<image v-if="status==3" src="@/static/images/order_icon3.png" mode=""></image>
			<image v-if="status==4" src="@/static/images/order_icon4.png" mode=""></image>
			<image v-if="status==5" src="@/static/images/order_icon5.png" mode=""></image>
			<text class="txt" v-if="status==2">请上传支付凭证</text>
			<text class="txt" v-if="status==3">待店面确认</text>
			<text class="txt" v-if="status==4">已完成</text>
			<text class="txt" v-if="status==5">已关闭</text>
		</view>
		<view class="address">
			<view class="name">{{consignee_realname}}  {{consignee_mobile}}</view>
			<view class="text">
				<image src="@/static/images/left_icon1.png" mode=""></image>
				<text>{{address}}</text>
			</view>
		</view>
		<!--  -->
		<view class="main">
			<view class="title">商品信息</view>
			<view class="goods_info">
				<view class="image">
					<image :src="goods_image" mode="aspectFill"></image>
					<text class="txt1">进货</text>
				</view>
				<view class="info">
					<view class="name one-txt-cut">{{goods_name}}</view>
					<view class="sku">
						<text>规格：件</text>
					</view>
					<view class="money">
						<text class="color1">￥{{wyy || '1.00'}}</text>
						<text class="color2">赠{{mrzf}}%</text>
					</view>
					<view class="num">
						<text class="left">到账数量：{{zq_text}}</text>
						<text class="right">x{{pay_money}}</text>
					</view>
				</view>
			</view>
			<view class="tip_txt" style="padding-top: 24rpx;">
				<view class="txt">
					<text class="color1">付</text>￥{{pay_money}}
				</view>
				<view class="txt">
					<text class="color2">得</text>￥{{zq_text}}
				</view>
				<view class="txt">
					<text class="color3">赚</text>￥{{make_money}}
				</view>
			</view>
		</view>
		<!--  -->
		<view class="main_info">
			<view class="info" v-if='image' style="height: 150rpx;align-items: flex-start;">
				<view class="left">付款凭证</view>
				<view class="image" @click="imageBtn">
					<image :src="image" mode="aspectFill"></image>
				</view>
			</view>
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right">{{order_num}}</view>
			</view>
			<view class="info">
				<view class="left">合计</view>
				<view class="right">￥{{pay_money}}</view>
			</view>
			<view class="info" v-if="refuse_msg">
				<view class="left">拒绝原因</view>
				<view class="right">{{refuse_msg}}</view>
			</view>
			<view class="info" v-if="bankInfo.bank">
				<view class="left">开户银行</view>
				<view class="right">{{bankInfo.bank}}</view>
			</view>
			<view class="info" v-if="bankInfo.name">
				<view class="left">账户名称</view>
				<view class="right">{{bankInfo.name}}</view>
			</view>
			<view class="info" v-if="bankInfo.number">
				<view class="left">银行账户</view>
				<view class="right">{{bankInfo.number}}</view>
			</view>
			
			<view class="info_time">
				<view class="line">
					<text></text>
				</view>
				<view class="time" v-if="createtime">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>创建时间</text>
					</view>
					<view class="right">{{createtime}}</view>
				</view>
				
				<view class="time" v-if="rob_time_text">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>抢购时间</text>
					</view>
					<view class="right">{{rob_time_text}}</view>
				</view>
				<view class="time" v-if="pya_time">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>提交支付凭证时间</text>
					</view>
					<view class="right">{{pya_time}}</view>
				</view>
				<view class="time" v-if="confirm_time_text && status==4">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>店面确认支付成功时间</text>
					</view>
					<view class="right">{{confirm_time_text}}</view>
				</view>
				<view class="time" v-if="confirm_time_text && status==5">
					<view class="left">
						<image src="@/static/images/time_icon.png" mode=""></image>
						<text>店面拒绝时间</text>
					</view>
					<view class="right">{{confirm_time_text}}</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="details_btn" :style="[botStyle]">
			<text class="btn1" @click="phoneBtn" v-if='userinfo.is_mobile==1'>联系店面</text>
			<text class="btn1" @click="shoukuanBtn">收款账户</text>
			<text class="btn2" v-if="status==2" @click="uploadBtn">上传凭证</text>
		</view>
		<!-- 支付信息 -->
		<PayInfo ref="pay_info" :info='bankInfo'></PayInfo>
		<!-- 上传支付凭证 -->
		<UploadPayment ref="upPayment" @submit='submitBtn'></UploadPayment>
		<!-- 确认收货 -->
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import PayInfo from '@/components/pay_info/pay_info.vue';
	import UploadPayment from '@/components/upload_payment/upload_payment.vue';
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	export default {
		components:{
			PayInfo,UploadPayment,ConfirmReceipt
		},
		data() {
			return {
				bottomHeight:0,
				id:'',
				status:'',
				consignee_realname:'',
				consignee_mobile:'',
				address:'',
				goods_image:'',
				goods_name:'',
				wyy:'',
				mrzf:'',
				pay_money:'',
				zq_text:"",
				make_money:'',
				image:"",
				order_num:'',
				refuse_msg:"",
				bankInfo:{
					name:'',
					bank:'',
					number:'',
					zfb_img:'',
					wx_image:'',
				},
				createtime:'',
				rob_time_text:'',
				pya_time:'',
				confirm_time_text:'',
				sell_mobile:'',
			};
		},
		computed:{
			...mapState({
				userinfo: state => state.userinfo
			}),
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+108+'rpx'):'108rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad(opt) {
			this.id=opt.id
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
			this.orderDetails()
		},
		methods:{
			orderDetails(){
				var that = this
				that.$tips.showLoading('加载中')
				var params = {
					order_id:that.id,
					source:'buy',
				}
				that.$httpApi.purOrderInfo(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.status=res.data.status
						that.consignee_realname=res.data.consignee_realname
						that.consignee_mobile=res.data.consignee_mobile
						that.address=res.data.address
						that.goods_image=res.data.goods_image
						that.goods_name=res.data.goods_name
						that.wyy=res.data.wyy
						that.mrzf=res.data.mrzf
						that.pay_money=res.data.pay_money
						that.zq_text=res.data.zq_text
						that.make_money=res.data.make_money
						that.image=res.data.image||''
						that.order_num=res.data.order_num
						that.refuse_msg=res.data.refuse_msg||''
						this.bankInfo.name=res.data.payee
						this.bankInfo.bank=res.data.opening_bank
						this.bankInfo.number=res.data.card_number
						this.bankInfo.zfb_img=res.data.zfb_img||''
						this.bankInfo.wx_image=res.data.wx_image||''
						that.createtime=res.data.createtime||''
						that.rob_time_text=res.data.rob_time_text||''
						that.pya_time=res.data.pya_time||''
						that.confirm_time_text=res.data.confirm_time_text||''
						that.sell_mobile=res.data.sell_mobile||''
					}
				})
			},
			// 收款账号
			shoukuanBtn(){
				this.$refs.pay_info.openBtn()
			},
			// 上传凭证
			uploadBtn(){
				this.$refs.upPayment.openBtn(this.id,2)
			},
			// 
			submitBtn(){
				this.orderDetails()
			},
			// 查看物流
			logisticsBtn(){
				uni.navigateTo({
					url:'/pages/other/logistics?order='+this.order_num
				})
			},
			// 联系店长
			phoneBtn(){
				uni.makePhoneCall({
					phoneNumber: this.sell_mobile
				});
			},
			// 联系客服
			kfBtn(){
				uni.navigateTo({
					url:'/pages/other/text?type=4'
				})
			},
			// 确认收货
			receiptBtn(){
				this.$refs.confirm_receipt.openBtn(this.id)
			},
			// 预览图片
			imageBtn(){
				var arr = []
				arr.push(this.image)
				uni.previewImage({
					current:0,
					urls: arr,
				})
			},
		}
	}
</script>

<style lang="less">
	.order_details{
		width: 100%;
		.details_top{
			width: 100%;
			height: 128rpx;
			padding: 0 32rpx;
			background: #26C281;
			display: flex;
			align-items: center;
			image{
				display: block;
				width: 48rpx;
				height: 48rpx;
			}
			.txt{
				padding-left: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.tip{
				padding-left: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.address{
			width: 100%;
			padding: 32rpx;
			background: #fff;
			.name{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.text{
				padding-top: 15rpx;
				display: flex;
				align-items: center;
				image{
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
				text{
					width: calc(100% - 24rpx);
					padding-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.main{
			margin-top: 24rpx;
			width: 100%;
			padding: 25rpx 32rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.goods_info{
				width: 100%;
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-top: 1rpx solid #F3F3F3;
				border-bottom: 1rpx solid #F3F3F3;
				display: flex;
				.image{
					position: relative;
					width: 168rpx;
					height: 168rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					text{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						display: block;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 10rpx 0 10rpx 0;
					}
					.txt1{
						background: #FFA551;
					}
					.txt2{
						background: #26C281;
					}
					.txt3{
						background: #148EFF;
					}
					.txt4{
						background: #BC171B;
					}
				}
				.info{
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					.name{
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					.sku{
						width: 100%;
						display: flex;
						text{
							display: block;
							padding: 0 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #F7F7F7;
							border-radius: 5rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.num_a{
						width: 100%;
						display: flex;
						align-items: center;
						text{
							padding-right: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
					}
					.money{
						width: 100%;
						display: flex;
						align-items: center;
						text{
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
						.color1{
							color: #FF6230;
						}
						.color2{
							color: #26C281;
						}
					}
					.num{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
						.right{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
			.tip_txt{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.txt{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
					text{
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
					.color1{
						background: #FF815A;
					}
					.color2{
						background: #43A5FF;
					}
					.color3{
						background: #51CE9A;
					}
				}
			}
			.main_text{
				width: 100%;
				margin-top: 8px;
				.info{
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.main_info{
			width: 100%;
			margin: 24rpx 0;
			padding: 20rpx 32rpx;
			background: #fff;
			.info{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						padding-left: 20rpx;
						color: #148EFF;
					}
				}
				.image{
					width: 148rpx;
					height: 148rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
			.info_time{
				position: relative;
				width: 100%;
				margin-top: 24rpx;
				.line{
					position: absolute;
					top: 0;
					left: 10rpx;
					z-index: 1;
					width: 4rpx;
					height: 100%;
					padding: 30rpx 0;
					text{
						display: block;
						width: 100%;
						height: 100%;
						background: #D4D7DD;
					}
				}
				.time{
					position: relative;
					z-index: 2;
					width: 100%;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 24rpx;
							height: 24rpx;
						}
						text{
							padding-left: 12rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
						}
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
		.details_btn{
			position: fixed;
			bottom: 0;
			z-index: 9;
			width: 100%;
			background: #fff;
			padding-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: flex-end;
			text{
				margin-left: 12rpx;
				display: block;
				padding: 0 20rpx;
				height: 68rpx;
				line-height: 64rpx;
				border-radius: 34rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}
			.btn1{
				color: #999;
				border: 2rpx solid #EBEBEB;
			}
			.btn2{
				color: #26C281;
				border: 2rpx solid #26C281;
			}
		}
	}
</style>
